<template>
  <div class="live-countdown-box">
    <div class="live-countdown-box-tag" />
    <span class="live-countdown-title">直播倒计时</span>
    <div class="live-countdown-horizontal" />
    <span class="live-countdown-overview-text">样式：</span>
    <div class="live-countdown-image">
      <el-image :src="require('@/assets/live_countdown_overview.png')">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
    </div>

    <div class="live-countdown-button-horizontal" />
    <el-button class="submit-button" type="primary" :loading="submitLoading" @click="updateLiveReq">提交</el-button>

    <div class="choice-box">

      <div class="display-switch">
        <span class="title-span-style">功能开关：</span>
        <el-switch
          v-model="disPlayData.IsEnableCountdown"
          :active-color="switchData.active_color"
          :inactive-color="switchData.inactive_color"
          :active-value="switchData.active_value"
          :inactive-value="switchData.inactive_value"
        />
      </div>

      <div class="countdown-postion-box">
        <span>倒计时位置：</span>
        <el-radio v-model="disPlayData.countdownPostion" label="top">顶部</el-radio>
      </div>

      <div class="countdown-tips-text-box">
        <span>提示文字：</span>
        <el-input
          v-model="disPlayData.CountDownTipText"
          class="elinput-style"
          placeholder="请输入内容"
          maxlength="20"
          @input="counddownTipsChanged"
        />
        <span class="countdown-tips-text-limit">{{ disPlayData.inputTotal }}/{{ disPlayData.inputMaxLimit }}</span>
      </div>

      <div class="start-time-box">
        <span>开始时间：</span>
        <el-date-picker
          v-model="disPlayData.StartTime"
          class="start-date-picker"
          type="datetime"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="left"
          @change="startTimeChanged"
        />
      </div>

      <div class="countdown-time">
        <span>倒计时剩余：</span>
        <span style="margin-left: 20px;">{{ surplusTime.day }}天{{ surplusTime.hours }}时{{ surplusTime.min }}分{{ surplusTime.seconds }}秒</span>
      </div>

    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { updateLive } from '@/api/lives'

export default {
  name: 'ConutdownSetting',
  data() {
    return {
      submitLoading: false,
      fileUploadAddr: '',
      fileDisplayAddr: '',
      fileUploadHeaders: {
        Authorization: ''
      },
      switchData: {
        inactive_value: false,
        active_value: true,
        active_color: '#13ce66',
        inactive_color: '#ff4949'
      },
      // 剩余时间
      surplusTime: {
        day: '00',
        hours: '00',
        min: '00',
        seconds: '00'
      },
      disPlayData: {
        IsEnableCountdown: true,
        CountDownTipText: '',
        StartTime: '',
        countdownPostion: 'top',
        inputTotal: 0,
        inputMaxLimit: 20
      },
      updateLiveData: {
        StartTime: '',
        IsEnableCountdown: '',
        CountDownTipText: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'choicedLive',
      'token'
    ])
  },
  watch: {
    'choicedLive'(n, o) {
      // 现有图片
      this.changeDisplayData()
    },
    'token'(n, o) {
      this.fileUploadHeaders.Authorization = this.token
    }
  },
  mounted() {
    // 获取图片的地址
    this.fileUploadHeaders.Authorization = this.token
    this.fileUploadAddr = process.env.VUE_APP_BASE_API + '/api/v1/files'
    this.changeDisplayData()
  },
  methods: {
    changeDisplayData() {
      if (this.choicedLive.id) {
        this.disPlayData.IsEnableCountdown = this.choicedLive.IsEnableCountdown || true
        this.disPlayData.CountDownTipText = this.choicedLive.CountDownTipText
        this.disPlayData.StartTime = this.choicedLive.StartTime
        this.startTimeChanged(this.choicedLive.StartTime)
        this.disPlayData.inputTotal = this.disPlayData.CountDownTipText.length
      }
    },
    async startTimeChanged(ev) {
      for (var i = 0; ; i++) {
        var c = new Date(ev)
        var ctimestamp = c.getTime()
        var ntimestamp = Date.parse(new Date())
        // to sec
        var t = (ctimestamp - ntimestamp)
        if (t > 0) {
          // 天
          this.surplusTime.day = Math.floor(t / (1000 * 60 * 60 * 24))
          // 小时
          this.surplusTime.hours = Math.floor(t / (1000 * 60 * 60) % 24)
          // 分钟
          this.surplusTime.min = Math.floor(t / (1000 * 60) % 60)
          // 秒
          this.surplusTime.seconds = Math.floor(t / 1000 % 60)
        }
        await this.sleep(1000)
      }
    },
    sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms))
    },
    // 倒计时提示文字
    counddownTipsChanged(ev) {
      const inputLength = ev.length
      if (inputLength >= this.disPlayData.inputMaxLimit) {
        this.$message.error(`提示文字不能大于${this.disPlayData.inputMaxLimit}个字符`)
      }
    },
    updateLiveReq() {
      this.submitLoading = true
      this.updateLiveData.StartTime = this.disPlayData.StartTime
      this.updateLiveData.IsEnableCountdown = this.disPlayData.IsEnableCountdown
      this.updateLiveData.CountDownTipText = this.disPlayData.CountDownTipText
      updateLive(this.updateLiveData, this.choicedLive.id).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
        }
      })
      this.submitLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.live-countdown-box {
    width: 1627px;
    height: 770px;
    background: #FFFFFF;
    border-radius: 10px;
    position: absolute;
    top: 13px;
    left: 260px;
}
.live-countdown-box-tag {
    width: 4px;
    height: 28px;
    background: #2E9BEA;
    border-radius: 2px;
    position: absolute;
    top: 25px;
    }
.live-countdown-horizontal {
    width: 1514px;
    height: 4px;
    background: #EDF5FB;
    position: absolute;
    top: 85px;
}
.live-countdown-overview-text {
    width: auto;
    height: 20px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #6D7A8E;
    position: absolute;
    top: 139px;
    left: 849px;
}

.live-countdown-image {
  display: flex;
  position: absolute;
  align-items: center;
  top: 196px;
  left: 849px;
  width: 461px;
  height: 374px;
  ::v-deep {
      .el-image__inner {
          width: 461px;
          height: 374px;
      }
  }
}
.live-countdown-button-horizontal {
    width: 1514px;
    height: 4px;
    background: #EDF5FB;
    position: absolute;
    top: 645px;
}
.submit-button {
    width: 159px;
    height: 50px;
    background: #2E9BEA;
    border-radius: 10px;
    position: absolute;
    top: 687px;
    left: 659px;
::v-deep {
  span {
    width: 46px;
    height: 20px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
  }
  }
}
.add-online-user {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: auto;
    height: 40px;
}
.button-text {
    display: flex;
    position: absolute;
    top: 366px;
    left: 193px;
    ::v-deep{
    span,p {
        width: auto;
        height: auto;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #A7B5CB;
        line-height: 2rem;
    }
    }
}
.elinput-style {
    width: auto;
    height: auto;
    border: 1px solid #AFBDD2;
    border-radius: 10px;
    ::v-deep {
        .el-input__inner,elinput-style,el-input,el-input--medium {
                width: 235px;
                height: 40px;
                border: 1px solid #AFBDD2;
                border-radius: 10px;
                border: 0px;
                display: flex;
                align-items: center;
        }
        span {
            width: 8px;
            height: 11px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #606772;
        }
    }
}
.choice-box {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: absolute;
    left: 75px;
    top: 143px;
    height: 400px;
    width: auto;
}
.display-switch {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: auto;
  height: 21px;
  }
.title-span-style {
  width: auto;
  height: auto;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #6D7A8E;
  margin-right: 20px;
  margin-left: 20px;
}
.live-countdown-title {
    width: 145px;
    height: 23px;
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #4A5462;
    position: absolute;
    top: 31px;
    left: 55px;
}
.countdown-postion-box {
  display: flex;
  align-items: center;
  span {
    width: auto;
    height: auto;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #6D7A8E;
    margin-right: 20px;
  }
  ::v-deep {
    .el-radio__label {
      width: auto;
      height: auto;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #6D7A8E;
    }
    .el-radio, is-checked {
      display: flex;
      align-items: center;
    }
  }
}
.countdown-time {
  width: auto;
  height: auto;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #6D7A8E;
}
.countdown-tips-text-box {
  span {
    width: 314px;
    height: 50px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #6D7A8E;
    margin-left: 20px;
    margin-right: 20px;
  }
  ::v-deep {
    .elinput-style, el-input, el-input--medium {
      width: 314px;
      height: 50px;
      font-size: 21px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #606772;
    }
  }
}
.start-time-box {
  display: flex;
  align-items: center;
  span {
    width: auto;
    height: auto;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #6D7A8E;
    margin-left: 20px;
    margin-right: 20px;
  }
  .start-date-picker {
    width: 314px;
    height: 50px;
    display: flex;
    align-items: center;
    // border: 1px solid #AFBDD2;
    // border-radius: 10px;
    border: 0px solid #AFBDD2;
border-radius: 10px;
  }
}

 ::v-deep {
      .el-input__inner {
        width: 314;
        height: 50px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #606772;
      }
    }
</style>
